<template>
    <div class="main">
    <div class="container">
      <!-- Header -->
      <!-- <div class="header">
        邀请好友下单，返佣30%现金，活动无上限，奖励无上限，参加活动 用V扫二维码。
      </div> -->
      <!-- Main Content -->
      <div class="content">
        <div class="left-section">
          <h2>欢迎回来</h2>
          <p class="note">
            【禁止一直刷图，不涉政，违规用户将被强制下线】
          </p>
          <p class="instructions">
            一定看 <a href="#">使用秘籍</a> 在使用<br />
            好评找客服领取大礼包，祝您AI绘图愉快！
          </p>
          <p class="warning">
            如登录提示没有魔法，没有魔法访问不了国外网站，魔法需要自己解决，或者联系客服购买MJ国内站。
          </p>
          <!-- Input and buttons -->
          <div class="auth-code">
            <input type="text" v-model="code" value="cvueBgTZUnMOSysqmxXLDVrhjQzlaJbk"  />
          </div>
          <div class="buttons">
            <!-- <button class="buy-btn">购买授权码</button> -->
            <button class="login-btn" @click="handleConfirm">登录</button>
          </div>
        </div>
        <!-- QR Code Section -->
        <div class="right-section">
          <img src="https://via.placeholder.com/150" alt="QR Code" />
          <p>扫描二维码</p>
        </div>
      </div>
      <!-- Footer -->
      <div class="footer">
        反馈建议，商务合作请微信联系 有问题直接联系客服店铺客服
      </div>
    </div>
</div>
  </template>
<script setup>
import { ref ,onMounted,watch} from 'vue';
import { ipcApiRoute } from '@/api/main';
import { ipc } from '@/utils/ipcRenderer';
import { loginVerify } from '../../api/app';
 const code = ref('');
function handleConfirm(){
        console.log(111);
        loginVerify({code:code.value}).then(res=>{
            ipc.send(ipcApiRoute.test, res);
            // console.log(res);
        })
       
 }

  // 使用 `onMounted` 钩子来执行在组件挂载时的逻辑
        onMounted(() => {
          // 检查本地存储中是否已经有保存的值
          const savedCode = localStorage.getItem('code');
          if (savedCode) {
            code.value = savedCode; // 如果有保存的值，则使用它
          } else {
            localStorage.setItem('code', code.value); // 如果没有保存的值，使用默认值并立即保存到本地存储
          }
        });

        // 监听 `code` 变量的变化，并将其保存到本地存储中
        watch(code, (newCode) => {
          localStorage.setItem('code', newCode);
        });

</script>


<style scoped>

.main {
  /* 设置背景图片 */
  background-image: url('@/assets/b9995525a52dc58aecf5.svg');
  /* 背景图片覆盖整个页面 */
  background-size: cover;
  /* 固定背景图片，不随页面滚动 */
  background-attachment: fixed;
  /* 背景图片居中显示 */
  background-position: center;
  /* 设置背景不重复 */
  background-repeat: no-repeat;
  /* 设置整个页面高度 */
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

.container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  background-color:rgba(0, 0, 0, 0.9);
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.header {
  background-color: #f5f5f5;
  padding: 10px;
  font-size: 14px;
  color: white;
  margin-bottom: 20px;
}

.content {
  display: flex;
  justify-content: space-between;
}

.left-section {
  width: 60%;
  text-align: left;
}

.right-section {
  width: 35%;
  text-align: center;
}

.note {
  color: #ff0000;
  font-weight: bold;
  margin-bottom: 10px;
}

.instructions {
  font-size: 14px;
  margin-bottom: 20px;
}

.warning {
  color: #fff;
  font-size: 12px;
  margin-bottom: 20px;
}

.auth-code input {
  width: 100%;
  padding: 8px;
  font-size: 14px;
  margin-bottom: 20px;
  text-align: center;
}

.buttons {
  display: flex;
  justify-content: space-between;
}

.buy-btn,
.login-btn {
  width: 48%;
  padding: 10px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

.buy-btn {
  background-color: #ffa500;
  color: #fff;
}

.login-btn {
  background-color: #1e90ff;
  color: #fff;
}

.footer {
  margin-top: 20px;
  font-size: 12px;
  color: #fff;
}
</style>